<template>
  <div id="chart"></div>
</template>

<script>
import {Graph} from '@antv/x6'

const data = {
  edges: [{
    source: 'a1',
    target: 'b1',
  }],
  nodes: [
    {
      id: 'b1',
      label: 'label',
      width: 120, height: 60,
      x: 100, y: 100
    },
    {
      id: 'a1',
      label: 'tool',
      width: 120,
      height: 80,
      x: 300, y: 200,
    }
  ]
}

export default {
  name: 'tool',
  methods: {
    createGraph() {
      this.graph = new Graph({
        container: document.getElementById('chart'),
        width: window.innerWidth,
        height: window.innerHeight,
        grid: true,
        background: {
          color: '#fffbe6'
        }
      })
      this.graph.fromJSON(data);
      
    },
    addTools() {
      this.graph.on('node:mouseenter', ({node}) => {
        node.addTools({
          name: 'button',
          args: {
            markup: [
              {
                tagName: 'circle',
                selector: 'button',
                attrs: {
                  r: 14,
                  stroke: '#fe854f',
                  strokeWidth: 2,
                  fill: 'white',
                  cursor: 'pointer',
                },
              },
              {
                tagName: 'text',
                textContent: 'del',
                selector: 'icon',
                attrs: {
                  fill: 'red',
                  fontSize: 12,
                  fontWeight: 'bold',
                  textAnchor: 'middle',
                  pointerEvents: 'none',
                  y: '0.3em',
                },
              },
            ],
            x: 0, y: 0,
            offset: { x: 20, y: 20 }, // 偏移量
            onClick({ cell }) { // 点击按钮 触发的事件
              cell.attr({
                body: {
                  strokeDasharray: 10,
                  fill: '#eee',
                  stroke: 'red',
                }
              })
            }
          }
        })
      })
    },
    removeTools() {
      this.graph.on('node:mouseleave', ({ cell }) => {
        cell.removeTools()
      });
    }
  },
  mounted() {
    this.createGraph();
    this.addTools()
    this.removeTools();
  }
}
</script>
